<template>

    <!-- 添加或修改对话框 -->
    <lam-dialog :title="title" :visible.sync="open" width="70%" @close="cancel">
      <el-form :ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="formDisabled">
        <el-row>
          <el-col :span="12">
            <el-form-item label="模板名称" prop="templateName">
              <el-input v-model="form.templateName" clearable placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否包邮" prop="isFreeFee">
              <lam-dict-select type="radio" v-model="form.isFreeFee" dictCode="free_fee_type" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收费方式" prop="chargeType">
              <lam-dict-select type="radio" v-model="form.chargeType" dictCode="charge_type" placeholder="" :disabled="form.isFreeFee==1" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-table :data="form.transFeeItemList" border style="width: 100%;" class="table-con" >
              <el-table-column header-align="center" align="center" width="450" label="配送区域">
                <template slot-scope="scope">
                  <span v-if="scope.row.deliveryScope == 1">全国(所有地区)</span>
                  <span v-else>
                    <span v-if="(!scope.row.cityList || !scope.row.cityList.length)" style="margin-right: 3px;">请选择配送区域</span>
                    <span v-else>
                      <el-tag v-for="city in scope.row.cityList" :key="city.id" style="margin:3px 3px 0 0;">{{city.areaName}}</el-tag>
                    </span>
                    <el-button type="primary" size="mini" class="table-cell-bt" @click="editTransCity(`${scope.$index}`, 'TransFeeItemCity')">编辑</el-button>
                    <el-button type="danger" size="mini" class="table-cell-bt" @click="delTransFeeItem(`${scope.$index}`)">删除</el-button>
                  </span>
                </template>
              </el-table-column>
              <el-table-column header-align="center" align="center" width="180" :label="tableTitle[0]">
                <template slot-scope="scope">
                  <el-form-item :prop="`transFeeItemList.${scope.$index}.firstPiece`" label-width="0px" :rules="[{ required: true, message: `${tableTitle[0]}不能为空`}]">
                    <el-input-number v-model="scope.row.firstPiece" controls-position="right" :min="0" :precision='0' :disabled="form.isFreeFee==1" style="width: 100%;"/>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column header-align="center" align="center" :label="tableTitle[1]">
                <template slot-scope="scope">
                  <el-form-item :prop="`transFeeItemList.${scope.$index}.firstFee`" label-width="0px" :rules="[{ required: true, message: `${tableTitle[1]}不能为空`}]">
                    <el-input-number v-model="scope.row.firstFee" controls-position="right" :min="0" :disabled="form.isFreeFee==1" style="width: 100%;"/>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column header-align="center" align="center" :label="tableTitle[2]">
                <template slot-scope="scope">
                  <el-form-item :prop="`transFeeItemList.${scope.$index}.continuousPiece`" label-width="0px" :rules="[{ required: true, message: `${tableTitle[2]}不能为空`}]">
                    <el-input-number v-model="scope.row.continuousPiece" controls-position="right" :min="0" :precision='0' :disabled="form.isFreeFee==1" style="width: 100%;"/>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column header-align="center" align="center" :label="tableTitle[3]">
                <template slot-scope="scope">
                  <el-form-item :prop="`transFeeItemList.${scope.$index}.continuousFee`" label-width="0px" :rules="[{ required: true, message: `${tableTitle[3]}不能为空`}]">
                    <el-input-number v-model="scope.row.continuousFee" controls-position="right" :min="0" :disabled="form.isFreeFee==1" style="width: 100%;"/>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
            <div style="margin-top: 6px" v-if="form.isFreeFee==0">
                <el-button type="primary" icon="el-icon-plus" @click="addTransFeeItem()">添加区域</el-button>
            </div>

            <div v-if="form.isFreeFee == 0">
              <el-checkbox v-model="form.hasFreeCondition" :true-label="1" :false-label="0" style="margin:20px 0 5px 0;font-size: 14px;">指定条件包邮</el-checkbox>
              <el-table :data="form.transFreeList" border style="width: 100%;" v-if="form.hasFreeCondition && form.isFreeFee == 0" >
                <el-table-column header-align="center" align="center" width="350" label="包邮区域">
                  <template slot-scope="scope">
                    <span v-if="!scope.row.cityList || !scope.row.cityList.length" style="margin-right: 3px;">请选择条件包邮区域</span>
                    <span v-else>
                      <el-tag v-for="city in scope.row.cityList" :key="city.areaId" style="margin: 3px 3px 0 0;">{{city.areaName}}</el-tag>
                    </span>
                    <el-button type="primary" size="mini" class="table-cell-bt" @click="editTransCity(`${scope.$index}`, 'TransFreeCity')">编辑</el-button>
                    <el-button type="danger" size="mini" class="table-cell-bt" @click="delTransFree(`${scope.$index}`)">删除</el-button>
                  </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" width="600" label="条件分类">
                  <template slot-scope="scope">
                    <lam-dict-select type="radio" v-model="scope.row.freeType" dictCode="free_type" placeholder="" clearable />
                  </template>
                </el-table-column>
                <el-table-column header-align="center" align="left" label="包邮条件">
                  <template slot-scope="scope">
                    <el-form-item :prop="`transFreeList.${scope.$index}.amount`" label-width="0px" :rules="[{ required: true, message: `不能为空`}]"
                                  v-if="scope.row.freeType == 1 || scope.row.freeType == 2" >
                      满 <el-input style="width:100px" v-model="scope.row.amount"></el-input> 元包邮
                    </el-form-item>
                    <el-form-item :prop="`transFreeList.${scope.$index}.piece`" label-width="0px" :rules="[{ required: true, message: `不能为空`}]"
                                  v-if="scope.row.freeType == 0 || scope.row.freeType == 2">
                      满 <el-input style="width:100px" v-model="scope.row.piece"></el-input> 件/kg/m³包邮
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin-top: 6px" v-if="form.hasFreeCondition && form.isFreeFee == 0">
                <el-button type="primary" icon="el-icon-plus" @click="addTransFree()">添加包邮条件</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

      <EditTransCity ref="editTransCity" @ok="okSelectCity"/>

    </lam-dialog>

</template>

<script>
import { EditMixin } from '@/components/mixins/EditMixin';
import EditTransCity from "./editTransCity"

export default {
  name: "EditTransFeeTemplate",
  mixins:[EditMixin],
  components: {
    EditTransCity
  },
  data() {
    return {
      form : {
        templateName: null,
        chargeType: 0,
        isFreeFee: 0,
        hasFreeCondition: 0,
        transFeeItemList: [{ cityList: [], deliveryScope : 1}],
        transFreeList: [{ cityList: [] }]
      },
      url: {
        base: '/mall/transFeeTemplate/'
      },
      // 表单校验
      rules: {
        templateName: [{required: true, message: "模板名称不能为空", trigger: "blur" }, {validator: this.templateNameUniqueValidator, trigger: 'blur'}],
        chargeType: [{ required: true, message: "收费方式不能为空", trigger: "blur" }],
        isFreeFee: [{ required: true, message: "包邮选项不能为空", trigger: "blur" }],
      },
    };
  },
  watch:{
    'form.isFreeFee':function(val){
      this.form.hasFreeCondition = 0;
      if(val){
        this.form.chargeType = 0
        this.form.transFeeItemList = [{deliveryScope: 1, cityList: [], firstPiece: 1, firstFee: 0, continuousPiece: 1, continuousFee: 0}];
      }else{
        this.form.transFeeItemList = [{deliveryScope: 0, cityList: []}];
      }
    }
  },
  computed: {
    tableTitle () {
      var titles = [['首件(个)', '运费(元)', '续件(个)', '续费(元)'], ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'], ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']]
      if (this.form.chargeType) {
        return titles[this.form.chargeType]
      }
      return titles[0]
    }
  },
  created() {
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        templateName: null,
        chargeType: 0,
        isFreeFee: 0,
        hasFreeCondition: 0,
        transFeeItemList: [{deliveryScope: 1, cityList: [], firstPiece: 1, firstFee: 0, continuousPiece: 1, continuousFee: 0}],
        transFreeList: [{cityList: [] , freeType: 0}]
      };
    },

    // 添加运费项
    addTransFeeItem () {
      this.form.transFeeItemList.push({ cityList: [], deliveryScope : 0 })
    },
    // 删除运费项
    delTransFeeItem (rowIndex) {
      this.form.transFeeItemList.splice(rowIndex, 1)
    },
    // 可配送区域和运费编辑
    editTransCity (rowIndex, type) {
      let cityList;
      if(type=='TransFeeItemCity'){
        cityList = this.form.transFeeItemList[rowIndex].cityList;
      }else{
        cityList = this.form.transFreeList[rowIndex].cityList;
      }
      let ids = !cityList||!cityList.length?[]:cityList.map(t=>t.id);
      this.$nextTick(() => {
        this.$refs.editTransCity.openDialog(ids, rowIndex, type)
      })
    },
    okSelectCity(cityList, rowIndex, type){
      if(type=='TransFeeItemCity'){
        this.form.transFeeItemList[rowIndex].cityList = cityList;
      }else{
        this.form.transFreeList[rowIndex].cityList = cityList;
      }
    },

    // 添加指定包邮条件
    addTransFree () {
      if (this.form.hasFreeCondition) {
        this.form.transFreeList.push({ cityList: [], freeType: 0 })
      }
    },
    // 删除指定包邮条件
    delTransFree (rowIndex) {
      this.form.transFreeList.splice(rowIndex, 1)
    },

    templateNameUniqueValidator(rule, value, callback) {
      let param = { templateName: value };
      if(this.operType=='update') param.id = this.form.id;
      this.checkUniqueAsyn(value, callback, 'transFeeTemplateName', param);
    },

    /** 提交按钮 */
    submitForm(){

      if(!this.form.transFeeItemList || !this.form.transFeeItemList.length){
        this.msgError("请添加运费项");
        return;
      }

      if(this.form.isFreeFee){
        //全部包邮
        this.form.transFreeList = [];
        this.form.hasFreeCondition = 0;
      }else{
        //非全部包邮
        for (let i in this.form.transFeeItemList) {
          let feeItem = this.form.transFeeItemList[i];
          if(!feeItem.deliveryScope && (!feeItem.cityList || !feeItem.cityList.length)){
            this.msgError("请选择配送区域");
            return;
          }
        }
        //是否指定城市包邮
        if(this.form.hasFreeCondition){
          if(!this.form.transFreeList || !this.form.transFreeList.length){
            this.msgError("请添加包邮城市项");
            return;
          }
          for (let i in this.form.transFreeList) {
            let transFree = this.form.transFreeList[i];
            if(!transFree.cityList || !transFree.cityList.length){
              this.msgError("请选择条件包邮区域");
              return;
            }
          }
        }else{
          this.form.transFreeList = []
        }
      }
      this.saveForm(this.url.base);
    }

  }
};
</script>

<style scoped>
.transport-dialog .table-con .el-form-item {
  margin-top: 16px;
  margin-bottom: 16px!important;
}
.table-cell-bt{
  height: 24px;
  vertical-align: bottom;
  line-height: 8px;
  margin-bottom: 1px;
  margin-top: 3px;
}
</style>
